<template>
    <div class="file-grid-wrapper tech-grid-wrapper">
        <ul
            class="file-list tech-file-list"
            v-loading="loading"
            element-loading-text="文件加载中……"
        >
            <li
                class="file-item tech-file-item"
                v-for="(item, index) in fileListSorted"
                :key="index"
                :title="$file.getFileNameComplete(item)"
                :style="`width: ${gridSize + 40}px; `"
                :class="item.userFileId === selectedFile.userFileId ? 'tech-active-item' : ''"
                @click="$file.handleFileNameClick(item, index, fileListSorted)"
                @contextmenu.prevent="handleContextMenu(item, index, $event)"
            >
                <video
                    :style="`height:${gridSize}px; width:${gridSize}px`"
                    v-if="$file.isVideoFile(item)"
                    :src="$file.setFileImg(item)"
                ></video>
                <el-image
                    class="file-img"
                    :src="$file.setFileImg(item)"
                    :style="`width: ${gridSize}px; height: ${gridSize}px;`"
                    fit="cover"
                    v-else
                />
                <div
                    class="file-name tech-file-name"
                    v-html="$file.getFileNameComplete(item, true)"
                ></div>
                <i
                    class="file-operate el-icon-more tech-file-operate"
                    :class="`operate-more-${index}`"
                    v-if="screenWidth <= 768"
                    @click.stop="handleClickMore(item, $event)"
                ></i>
                <div
                    class="file-checked-wrapper tech-checked-wrapper"
                    :class="{ 'tech-checked': item.checked }"
                    v-show="isBatchOperation"
                    @click.stop.self="item.checked = !item.checked"
                >
                    <el-checkbox
                        class="file-checked tech-checkbox"
                        v-model="item.checked"
                        @click.stop="item.checked = !item.checked"
                    ></el-checkbox>
                </div>
            </li>
        </ul>
        <ul class="right-menu-list tech-right-menu-list">
            <li class="right-menu-item tech-menu-item">
                <i class="el-icon-folder-opened"></i> 打开
            </li>
            <li class="right-menu-item tech-menu-item">
                <i class="el-icon-download"></i> 下载
            </li>
            </ul>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'FileGrid',
    props: {
        // 文件类型
        fileType: {
            required: true,
            type: Number
        },
        // 文件路径
        filePath: {
            required: true,
            type: String
        },
        fileList: Array, //  文件列表
        loading: Boolean
    },
    data() {
        return {
            fileListSorted: [],
            officeFileType: ['ppt', 'pptx', 'doc', 'docx', 'xls', 'xlsx'],
            selectedFile: {}
        }
    },
    computed: {
        /**
         * gridSize: 图标大小
         *  */
        ...mapGetters(['gridSize']),
        // 是否批量操作
        isBatchOperation() {
            return this.$store.state.fileList.isBatchOperation
        },
        // 批量操作模式 - 被选中的文件
        selectedFileList() {
            let res = this.fileListSorted.filter((item) => item.checked)
            return res
        },
        // 屏幕宽度
        screenWidth() {
            return this.$store.state.common.screenWidth
        }
    },
    watch: {
        // 文件平铺模式 排序-文件夹在前
        fileList(newValue) {
            this.fileListSorted = [...newValue]
                .sort((pre, next) => {
                    return next.isDir - pre.isDir
                })
                .map((item) => {
                    return {
                        ...item,
                        checked: false
                    }
                })
        },
        // 批量操作模式 - 监听被选中的文件
        selectedFileList(newValue) {
            this.$store.commit('changeSelectedFiles', newValue)
            this.$store.commit('changeIsBatchOperation', newValue.length !== 0)
        }
    },
    methods: {
        /**
         * 文件鼠标右键事件
         * @param {object} item 文件信息
         * @param {number} index 文件索引
         * @param {object} event 鼠标事件信息
         */
        handleContextMenu(item, index, event) {
            // 阻止右键事件冒泡
            event.cancelBubble = true
            // xs 以上的屏幕
            if (this.screenWidth > 768) {
                this.selectedFile = item
                if (!this.isBatchOperation) {
                    event.preventDefault()
                    this.$openBox
                        .contextMenu({
                            selectedFile: item,
                            domEvent: event
                        })
                        .then((res) => {
                            this.selectedFile = {}
                            if (res === 'confirm') {
                                this.$emit('getTableDataByType') //  刷新文件列表
                                this.$store.dispatch('showStorage') //  刷新存储容量
                            }
                        })
                }
            }
        },
        /**
         * 更多图标点击事件
         * @description 打开右键菜单
         * @param {object} item 当前行数据
         * @param {object} event 当前右键元素
         */
        handleClickMore(item, event) {
            this.selectedFile = item
            if (!this.isBatchOperation) {
                event.preventDefault()
                this.$openBox
                    .contextMenu({
                        selectedFile: item,
                        domEvent: event
                    })
                    .then((res) => {
                        this.selectedFile = {}
                        if (res === 'confirm') {
                            this.$emit('getTableDataByType') //  刷新文件列表
                            this.$store.dispatch('showStorage') //  刷新存储容量
                        }
                    })
            }
        }
    }
}
</script>

<style lang="less" scoped>
/* ================= 赛博朋克主题变量 (继承或重新定义) ================= */
@bg-dark: #0f1219;
@bg-panel: rgba(26, 31, 44, 0.7);
@primary-color: #00f2ff; /* Cyber Cyan */
@accent-color: #7d2ae8;  /* Neon Purple */
@text-main: #e2e8f0; // 浅色主文本
@text-sub: #94a3b8;  // 辅助文本
@border-color: rgba(255, 255, 255, 0.08); // 用于主要边框
@hover-bg: rgba(0, 242, 255, 0.1); // 悬停背景
@active-bg: rgba(0, 242, 255, 0.15); // 选中背景
@danger-color: #ff4949; // 危险操作颜色
@context-bg: rgba(30, 35, 48, 0.95); // 右键菜单背景

/* Mixin for scrollbar */
.setScrollbar(@width, @track-color, @thumb-color) {
  &::-webkit-scrollbar {
    width: @width;
    height: @width;
  }
  &::-webkit-scrollbar-track {
    background: @track-color;
  }
  &::-webkit-scrollbar-thumb {
    background: @thumb-color;
    border-radius: @width / 2;
  }
}

.file-grid-wrapper.tech-grid-wrapper {
    border-top: 1px solid @border-color; // 顶部边框
    padding: 20px; // 内部填充
    background-color: @bg-dark; // 使用深色背景，如果外部容器已经设置，这里可以省略
    color: @text-main; // 默认文本颜色
}

.file-list.tech-file-list {
    height: 100%; // 自动适应父容器高度
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    list-style: none;
    .setScrollbar(6px, transparent, rgba(148, 163, 184, 0.4)); // 赛博朋克滚动条
    padding: 0; // 重置 ul 的默认 padding
    margin: 0; // 重置 ul 的默认 margin
}

.file-item.tech-file-item {
    margin: 0 16px 16px 0;
    position: relative;
    padding: 12px; // 增大内边距
    text-align: center;
    cursor: pointer;
    z-index: 1;
    background-color: @bg-panel; // 文件项背景色
    border: 1px solid @border-color; // 边框
    border-radius: 8px; // 圆角
    box-shadow: 0 0 10px rgba(0, 242, 255, 0); // 默认无光效
    transition: all 0.3s ease; // 平滑过渡

    video, .file-img {
        border-radius: 4px; // 媒体文件和图片圆角
        object-fit: contain; // 图像适应容器
    }

    &:hover {
        background: @hover-bg; // 悬停背景
        border-color: @primary-color; // 悬停边框颜色
        box-shadow: 0 0 15px @primary-color; // 悬停霓虹光效
        transform: translateY(-2px); // 轻微上浮
        
        .file-name.tech-file-name {
            color: @primary-color; // 悬停文件名颜色
            text-shadow: 0 0 8px rgba(0, 242, 255, 0.7); // 悬停文本光效
        }
    }

    &.tech-active-item {
        background: @active-bg; // 选中背景
        border-color: @primary-color; // 选中边框颜色
        box-shadow: 0 0 20px @primary-color, inset 0 0 10px @primary-color; // 选中霓虹光效
        transform: scale(1.02); // 轻微放大
        
        .file-name.tech-file-name {
            color: @primary-color; // 选中文件名颜色
            font-weight: bold;
            text-shadow: 0 0 10px rgba(0, 242, 255, 0.9); // 选中文本光效
        }
    }

    .file-name.tech-file-name {
        margin-top: 10px; // 调整间距
        height: 44px;
        line-height: 22px;
        font-size: 13px; // 调整字号
        color: @text-main; // 默认文件名颜色
        word-break: break-all;
        /* setEllipsis(2); */ // Stylus mixin，这里需要手动实现或替换
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        ::v-deep .keyword {
            color: @danger-color; // 关键词高亮
            font-weight: bold;
            text-shadow: 0 0 5px @danger-color; // 关键词光效
        }
    }

    .file-operate.tech-file-operate {
        position: absolute;
        top: 8px;
        right: 8px;
        font-size: 18px;
        color: @text-sub;
        transition: color 0.2s;

        &:hover {
            color: @primary-color;
        }
    }

    .file-checked-wrapper.tech-checked-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background: rgba(0, 0, 0, 0.4); // 选中遮罩背景，略带透明
        width: 100%;
        height: 100%;
        border-radius: 8px; // 保持与文件项一致的圆角

        .file-checked.tech-checkbox {
            position: absolute;
            top: 10px;
            left: 10px; // 调整位置

            // 覆盖 Element UI Checkbox 样式
            ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
            ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
                background-color: @primary-color;
                border-color: @primary-color;
            }
            ::v-deep .el-checkbox__inner {
                background-color: rgba(255, 255, 255, 0.1);
                border: 1px solid @primary-color;
            }
            ::v-deep .el-checkbox__inner:hover {
                border-color: @primary-color;
            }
            ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
                color: @primary-color;
            }
        }
    }

    .file-checked-wrapper.tech-checked {
        background: rgba(0, 0, 0, 0); // 选中后透明
    }
}

/* ================= 右键菜单样式 (el-menu context menu) ================= */
.right-menu-list.tech-right-menu-list,
.unzip-list { // 如果解压菜单也是自定义的，也应用样式
    background: @context-bg; // 深色半透明背景
    border: 1px solid @primary-color; // 霓虹边框
    border-radius: 6px; // 略微圆角
    box-shadow: 0 4px 15px rgba(0, 242, 255, 0.4); // 霓虹光效阴影
    color: @text-main; // 主文本颜色
    padding: 6px 0; // 调整内边距
}

.right-menu-list.tech-right-menu-list {
    // 如果这个 ul 是作为右键菜单的实际容器，其定位和显示由 JS 控制
    position: fixed; // 确保是 fixed
    flex-direction: column;
    z-index: 1000; // 确保在最上层
    display: none; // 默认隐藏，由JS控制显示
}

.tech-menu-item {
    padding: 0 16px;
    height: 38px;
    line-height: 38px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;

    &:hover {
        background: @hover-bg; // 悬停背景
        color: @primary-color; // 悬停文本颜色
        text-shadow: 0 0 5px rgba(0, 242, 255, 0.5); // 悬停文本光效
        i {
            color: @primary-color; // 悬停图标颜色
        }
    }
    i {
        margin-right: 8px;
        color: @accent-color; // 默认图标颜色
    }
}

// 解压子菜单的样式，如果存在
.unzip-menu-item {
    position: relative;
    &:hover {
        .unzip-list {
            display: block; // 悬停显示
        }
    }
    .unzip-list {
        position: absolute;
        top: 0;
        left: 100%; // 子菜单在右侧
        display: none; // 默认隐藏
        min-width: 180px;
        .tech-menu-item(); // 继承菜单项样式
    }
}

</style>